<template>
	<u-overlay :show="show"  @click="closeModal" >
		<uni-transition ref="ani" custom-class="transition" mode-class="slide-bottom" :show="show" :styles="style">
			<view class="u-modal" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}" @tap.stop>
				<view class="u-title">
					<text>{{$t('task_step.title')}}</text>
				</view>
				<view class="u-content">
					<view class="step-item flex-between">
						<view class="step-item_num">
							<text></text>
						</view>
						<view class="step-item_content text-sm">
							<view class="step-item__title">
								<text>{{$t('task_step.one-title')}}</text>
							</view>
							<view class="step-item__desc text-xs">
								<text>{{$t('task_step.one-desc')}}</text>
							</view>
						</view>
					</view>
					<view class="step-item flex-between">
						<view class="step-item_num">
							<text></text>
						</view>
						<view class="step-item_content text-sm">
							<view class="step-item__title">
								<text>{{$t('task_step.two-title')}}</text>
							</view>
							<view class="step-item__desc text-xs">
								<text>{{$t('task_step.two-desc')}}</text>
							</view>
						</view>
					</view>
					<view class="step-item flex-between">
						<view class="step-item_num">
							<text></text>
						</view>
						<view class="step-item_content text-sm">
							<view class="step-item__title">
								<text>{{$t('task_step.three-title')}}</text>
							</view>
							<view class="step-item__desc text-xs">
								<text>{{$t('task_step.three-desc')}}</text>
							</view>
						</view>
					</view>
					<view class="step-item flex-between">
						<view class="step-item_num">
							<text></text>
						</view>
						<view class="step-item_content text-sm">
							<view class="step-item__title">
								<text>{{$t('task_step.four-title')}}</text>
							</view>
							<view class="step-item__desc text-xs">
								<text>{{$t('task_step.four-desc')}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="u-btn m-t-md" >
					<view class="button bg-yellow flex-between" @click="btnClick()">
						<text class="text-sm">{{$t('task_step.over-btn')}}</text>
					</view>
				</view>
			</view>
			<view class="close">
				<u-icon name="close-circle-fill" color="#fffff" size="35"></u-icon>
			</view>
		</uni-transition>
	</u-overlay>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name:"m-onlinesteptips",
		props: ['cacheKey','show','type'],
		data() {
			return {
				currentShow:this.show,
				style: {
					display: "flex",
					flexDirection:"column",
					alignItems: "center",
					justifyContent: "center",
					height: "100%",
				},
			};
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		beforeMount(){
			
		},
		methods:{
			closeModal(){
				this.$emit('closeModal');
			},
			btnClick(){
				uni.setStorageSync('task_step_tips','true');
				this.closeModal();
			},
		}
	}
</script>

<style lang="scss">

	.u-steps{
		position: relative;
	}
	/deep/ .u-steps .u-text__value--tips{
		padding-bottom: 5px;
		// font-size: 255px;
	/* 	padding-bottom: 10px; */
	}
/* 	/deep/ .u-steps .u-text__value--tips{
		padding-bottom: 50px;
	} */
	.u-modal{
		width: 80%;
		background:#fff;
		border-radius:10px;
		position: relative;
		overflow: hidden;
	}
	.u-title{
		// padding: 10px;
		padding: 20px 0;
		text-align: center;
		position: relative;
		text{
			font-size: 34rpx;
			position: relative;
			z-index: 2;
		}
	}
	.u-title::before {
		content: "";
		position: absolute;
		left: 50%;
		top: -160px;
		-webkit-transform: translate(-50%, 0);
		background-color: var(--main-color-1);
		width: 200%;
		height: 220px;
		border-radius: 50%;
	}
	.u-content{
		padding: 10px 30px;
		color: #666;
		position: relative;
		overflow: hidden;
	}
	.u-btn{
		text-align: center;
		padding-bottom: 15px;
	}
	.u-btn .button{
		padding: 5px 10px;
		background: #f2bc35;
		color: #3f2a17;
		width: 60%;
		text-align: center;
		border-radius: 25px;
		font-size: 30rpx;
		margin: 0 auto;
		align-items: center;
		flex-wrap: nowrap;
	}
	.u-btn .button text{
		text-align: center;
		width: 100%;
	}
	.u-btn .button .u-icon{
		background-color: rgba(255,255,255,.3);
		border-radius: 50px;
	}
	
	.step-item{
		flex-wrap: nowrap;
		align-items: flex-start;
		position: relative;
		padding-bottom: 30rpx;
		.flex-between{
			align-items: flex-start;
			flex-wrap: nowrap;
		}
		&_num{
			margin-top: 8rpx;
			// margin-right: 5px;
			text{
				position: relative;
				width: 25rpx;
				height: 25rpx;
				border-radius: 100%;
				background-color: var(--main-color-1);
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 2;
			}
		}
		&_content{
			margin-left: 30rpx;
			width: 100%;
		}
		&__title{
		}
		&__desc{
			margin-top: 15rpx;
		}
	}
	.step-item:first-child{
		margin-top: 30rpx;
	}
	.step-item:after{
		position: absolute;
		content: '';
		left: 12rpx;
		width: 1px;
		height: 100%;
		background-color: var(--main-color-1);
		top: 5px;
		z-index: 1;
	}
	.step-item:last-child{
		padding-bottom: 0;
	}
	.step-item:last-child:after{
		display: none;
	}
	
	.u-from{
		border-top: 1px solid #F3F3F3;
		padding: 30px 10px 0;
	}
	.u-from .u-btn{
		margin-top: 30px;
	}
	.u-from .u-btn .button{
		padding: 0 10px;
	}
	.u-from .input{
		background-color: #F3F3F3;
		font-size: 32rpx;
		padding: 10px 15px;
		border-radius: 25px;
	}
	.close{
		margin-top: 20px;
		z-index: 3;
		opacity: .3;
	}

</style>
